<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

<ui:composition template="templates/common.xhtml">
	<ui:define name="pageTitle">Gestion options</ui:define>
	<ui:define name="pageHeader">
<!-- 		<h:outputLabel class="form-control" id="nomHotel" -->
<!-- 			value="#{loginManagedBean.connectionPassword}" /> -->
	</ui:define>

	<ui:define name="body">

		<h:outputText value="#{optionsManagedBean.nomHotel}" style="font-weight:bold;font-size:27px"></h:outputText>


		<div class="bs-docs-section">
			<div class="row">
				<div class="col-lg-6">
					<div class="well">
						<h:form class="bs-example form-horizontal">
							<fieldset>
								<legend>Gestion options</legend>
								<div class="bs-docs-section">
									<div class="bs-example">
										<h:dataTable
											class="table table-striped table-bordered table-hover"
											value="#{optionsManagedBean.lesOptions}" var="o">
											<h:column>
												<f:facet name="header">Option</f:facet>
    					#{o.name}
    				</h:column>
											<h:column>
												<f:facet name="header">Prix (€)</f:facet>
    					#{o.prix}
    				</h:column>
   
											<h:column>
												<f:facet name="header"></f:facet>
												<h:commandButton class="btn btn-primary btn-xs"
													value="Modifier"
													actionListener="#{optionsManagedBean.afficherOptionAModifier}">
													<f:attribute id="optionAModifier" name="optionAModifier" value="#{o}"/>
												</h:commandButton>
												<h:commandButton class="btn btn-primary btn-xs"
													value="Supprimer"
													actionListener="#{optionsManagedBean.supprimerOptions}" >
													<f:attribute id="optionASupprimer" name="optionASupprimer" value="#{o}"/>
												</h:commandButton>
											</h:column>
										</h:dataTable>
									</div>
								</div>


								<div class="form-group">
									<div class="col-lg-10 col-lg-offset-4">
										<h:commandLink 
											value="Ajouter option"
											action="#{optionsManagedBean.afficherDivAjout}" style="font-weight:bold;font-size:15px"/>
									</div>
								</div>
							</fieldset>
						</h:form>

					</div>
				</div>
				
				<h:panelGroup id="panelGroupGlobal" rendered="#{optionsManagedBean.afficherDivDroite}">
				<div class="col-lg-5">
					<div class="well">
						<h:form class="bs-example form-horizontal">
						
						<h:panelGroup id="panelGroupAjout" rendered="#{optionsManagedBean.divAjoutAffichee}">
						<div id="nvelleOption" >
						
							<fieldset>
								<legend>Nouvelle option</legend>
								
								<div class="form-group">
									<label for="nom" class="col-lg-4 control-label">Nom : </label>
									<div class="col-lg-6">
										<h:inputText class="form-control" id="nom"
											value="#{optionsManagedBean.nomOption}" />
									</div>
								</div>
								
								<div class="form-group">
									<label for="prix" class="col-lg-4 control-label">Prix : </label>
									<div class="col-lg-6">
										<h:inputText class="form-control" id="prix"
											value="#{optionsManagedBean.prixOption}" />
									</div>
								</div>
								
								<div class="form-group">
									<div class="col-lg-10 col-lg-offset-4">
										<h:commandButton class="btn btn-primary" value="Ajouter"
											action="#{optionsManagedBean.ajouterOptions}" />
									</div>
								</div>
							</fieldset>
						</div>
						</h:panelGroup>
						
						<h:panelGroup id="panelGroupModif" rendered="#{optionsManagedBean.divModifAffichee}">
						<div id="modifOption">
						
							<fieldset>
								<legend>Modifier option</legend>
								
								<div class="form-group">
									<label for="nom" class="col-lg-4 control-label">Nom : </label>
									<div class="col-lg-6">
										<h:inputText class="form-control" id="nomAModifier"
											value="#{optionsManagedBean.nomOptionSelectionnee}" />
									</div>
								</div>
								
								<div class="form-group">
									<label for="prix" class="col-lg-4 control-label">Prix : </label>
									<div class="col-lg-6">
										<h:inputText class="form-control" id="prixAModifier"
											value="#{optionsManagedBean.prixOptionSelectionnee}" />
									</div>
								</div>
								
								<div class="form-group">
									<div class="col-lg-10 col-lg-offset-4">
										<h:commandButton class="btn btn-primary" value="Modifier"
											action="#{optionsManagedBean.modifierOptionSelectionnee}" />
									</div>
								</div>
							</fieldset>
							
						</div>
						</h:panelGroup>
						</h:form>
					</div>
				</div>
				</h:panelGroup>
				
				
<script type="text/javascript" >
	var nvelleOption = document.getElementById("nvelleOption");
	var modifOption = document.getElementById("modifOption");
	var nomAModifier = document.getElementById("nomAModifier");
	var prixAModifier = document.getElementById("prixAModifier");
	var optionAModifier = document.getElementById("optionAModifier");
	
	function blcModif() {
		nvelleOption.style.display = "none";
		modifOption.style.display = "block";
		nomAModifier.value=optionAModifier.getAttribute("name");
		prixAModifier.value=optionAModifier.getAttribute("prix");
	}
	
	function blcNvelle() {
		nvelleOption.style.display = "block";
		modifOption.style.display = "none";
	}
	</script>
			</div>

		</div>

	</ui:define>

</ui:composition>
</html>